import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:moose_app/ui/screens/video/video_right_info.dart';
import 'package:moose_app/ui/values/values.dart';
import 'package:video_player/video_player.dart';

import 'video_bottom_info.dart';
import 'video_process_bar.dart';

class ATHVideoBody extends StatefulWidget {
  @override
  _ATHVideoBodyState createState() => _ATHVideoBodyState();
}

class _ATHVideoBodyState extends State<ATHVideoBody>
    with TickerProviderStateMixin {
  VideoPlayerController _videoPlayerController;

  AnimationController _rotationAnimationController;

  AnimationController _translationAnimationController;

  Animation<Offset> _translationAnimation;

  @override
  void initState() {
    super.initState();
    _videoPlayerController =
        VideoPlayerController.asset('assets/videos/1618149115756924.mp4')
          ..initialize().then((_) {
            // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
            setState(() {});
          });
    _videoPlayerController.addListener(_videoPlayListener);
    _videoPlayerController.setLooping(true);
    _videoPlayerController.play();

    _rotationAnimationController =
        AnimationController(duration: const Duration(seconds: 5), vsync: this);

    _translationAnimationController =
        AnimationController(duration: const Duration(seconds: 5), vsync: this);

    _translationAnimation = Tween(begin: Offset(1, 0), end: Offset.zero)
        .animate(_translationAnimationController);
  }

  _videoPlayListener() {
    if (null != _rotationAnimationController) {
      if (_videoPlayerController.value.isPlaying) {
        _rotationAnimationController.repeat();
        _translationAnimationController.repeat();
      } else {
        _rotationAnimationController.stop();
        _translationAnimationController.stop();
      }
    }
  }

  _handlePlayVideo() {
    setState(() {
      _videoPlayerController.value.isPlaying
          ? _videoPlayerController.pause()
          : _videoPlayerController.play();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black.withOpacity(.5),
      body: Stack(
        children: [
          _videoPlayerController.value.isInitialized
              ? GestureDetector(
                  onTap: _handlePlayVideo,
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height,
                    child: AspectRatio(
                      aspectRatio: 1,
                      child: VideoPlayer(_videoPlayerController),
                    ),
                  ),
                )
              : Container(),
          ATHVideoBottomInfo(
            translationAnimation: _translationAnimation,
            rotationAnimationController: _rotationAnimationController,
          ),
          ATHVideoRightInfo(),
          ATHVideoProcessBar(),
          _buildPausePlayButton(),
        ],
      ),
    );
  }

  Widget _buildPausePlayButton() {
    return _videoPlayerController.value.isPlaying
        ? SizedBox()
        : GestureDetector(
            onTap: _handlePlayVideo,
            child: Center(
                child: Container(
              width: kSize100,
              height: kSize100,
              child: SvgPicture.asset(
                "assets/icons/icon_pause.svg",
                height: kSize48,
                color: Colors.white.withOpacity(.5),
              ),
            )),
          );
  }

  @override
  void dispose() {
    if (null != _videoPlayerController) {
      _videoPlayerController.pause();
      _videoPlayerController.dispose();
      _videoPlayerController.removeListener(_handlePlayVideo);
    }
    super.dispose();
  }
}
